* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

body {
  background-color: #F2F6FC;
}

.box {
  width: 600px;
  height: 300px;
  border-bottom: 2px solid #409EFF;
  margin: 50px auto;
  position: relative;
  cursor: pointer;
  background-image: url('./pic-2.jpg');
  background-size: 0%;
  transition: all 2s;
}

.box:hover {
  background-size: 430%;
  border-bottom: 2px solid #67C23A;
  border-radius: 8px;
}

.box div {
  height: 250px;
  width: 70px;
  background-color: rgb(253, 11, 11);
  position: absolute;
  left: 250px;
  text-align: center;
  color: white;
  font-size: 2em;
  transform-origin: center bottom;
  transition: all 2s;
  box-shadow: 3px 3px 5px #333;
}

.box div {
  opacity: .9;
}

.box div:nth-child(2) {
  background-color: rgb(0, 128, 0);
}

.box div:nth-child(3) {
  background-color: rgb(248, 248, 16);
}

.box div:nth-child(4) {
  background-color: rgb(0, 0, 255);
}

.box div:nth-child(5) {
  background-color: rgb(250, 170, 184);
}

.box div:nth-child(6) {
  background-color: rgb(5, 5, 155);
}

.box div:nth-child(7) {
  background-color: rgb(151, 5, 151);
}

.box div:nth-child(8) {
  background-color: rgb(145, 4, 145);
}

.box div:nth-child(9) {
  background-color: rgb(4, 4, 158);
}

.box div:nth-child(10) {
  background-color: rgb(207, 114, 130);
}

.box div:nth-child(11) {
  background-color: rgb(13, 13, 255);
}

.box div:nth-child(12) {
  background-color: rgb(235, 235, 39);
}

.box div:nth-child(13) {
  background-color: rgb(0, 128, 0);
}

.box:hover div:nth-child(2) {
  transform: rotate(15deg);
}

.box:hover div:nth-child(3) {
  transform: rotate(30deg);
}

.box:hover div:nth-child(4) {
  transform: rotate(45deg);
}

.box:hover div:nth-child(5) {
  transform: rotate(60deg);
}

.box:hover div:nth-child(6) {
  transform: rotate(75deg);
}

.box:hover div:nth-child(7) {
  transform: rotate(90deg);
}

.box:hover div:nth-child(8) {
  transform: rotate(-90deg);
}

.box:hover div:nth-child(9) {
  transform: rotate(-75deg);
}

.box:hover div:nth-child(10) {
  transform: rotate(-60deg);
}

.box:hover div:nth-child(11) {
  transform: rotate(-45deg);
}

.box:hover div:nth-child(12) {
  transform: rotate(-30deg);
}

.box:hover div:nth-child(13) {
  transform: rotate(-15deg);
}